<#include "/common/header.html" />
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="${basePath}/js/plugins/ng-img-crop.js"></script>
<link rel="stylesheet" type="text/css" href="${basePath}/css/ng-img-crop.css">
<div class="container jy-content">
    <div class="col-md-4 nav-parent jy-content">
        <nav class="navbar nav-padding" role="navigation">
            <div class="collapse navbar-collapse js-navbar-scrollyspy">
                <ul class="nav nav-pills">
                    <li>
                        <a href="#D1" class="scroll">基础设置</a>
                    </li>
                    <li>
                        <a href="#D2" class="scroll">个人资料</a>
                    </li>
                    <!--<li>
                        <a href="#D3" class="scroll">微博认证</a>
                    </li>
                    <li>
                        <a href="#D4" class="scroll">黑名单</a>
                    </li>
                    <li>
                        <a href="#D5" class="scroll">赞赏设置</a>
                    </li>
                    <li>
                        <a href="#D6" class="scroll">账号管理</a>
                    </li>-->
                </ul>
            </div>
        </nav>
    </div>
    <div class="col-md-8 jy-white padding">
        <h4 id="D1">基础设置</h4>
        <div class="basics">
            <#if user.userInfoVO.avatarUrl??>
            <img id="odlUserAvatar" src="<#if user.userInfoVO.avatarUrl?contains('http:')>${(user.userInfoVO.avatarUrl)}<#elseif user.userInfoVO.avatarUrl?contains('files')>http://image.jianyiblog.com/${(user.userInfoVO.avatarUrl)}</#if>" />
                <#else>
                    <img src="/img/camera.png" />
            </#if>
                <button class="file file-mar" data-toggle="modal" data-target="#myModal">
                修改头像
            </button>
        </div>
        <!-- 模态框（Modal） -->
        <div style="height: 550px" class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title" id="myModalLabel">
                            头像裁剪
                        </h4>
                    </div>
                    <div class="modal-body">
                        <body ng-app="app" ng-controller="Ctrl">
                        <div><input type="file" id="fileInput" name="file" style="display:none" />
                            <button class="btn btn-primary" onclick="fileInput.click()" >选择头像</button>
                        </div>
                        <div align="center" class="cropArea" style="background: #E4E4E4;overflow: hidden;width: 565px;height: 150px">
                            <!-- 截取图片框  -->
                            <img-crop image="myImage" result-image="myCroppedImage"></img-crop>
                        </div>
                        <div>预览</div>
                        <!-- 预览图片框  -->
                        <div style="height: 150px;width: 150px;"><img id="userAvatar" ng-src="{{myCroppedImage}}" /></div>
                        </body>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                        </button>
                        <button type="button" class="btn btn-primary" onclick="uploadAvatar();">
                            上传
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="basics basics-3">
            <span>电子邮件</span>
            <input type="email" class="form-control" id="email" name="email" placeholder="${(user.email)!'Email'}">
            <a href="javascript:;" class="file" id="send_email">发送
            </a>
        </div>
        <div id="mobile_div" class="basics">
            <span>手机</span>
            <button class="file" id="mobile_button">绑定手机</button>
            <input type="hidden" id="user_mobile" value="${(user.phone)!'Mobile'}" />
            </a>
        </div>
        <!--<div class="basics">
            <span>常用编辑器</span>
            <label class="radio-inline">
                <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">富文本
            </label>
            <label class="radio-inline">
                <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> markdown
            </label>
        </div>
        <div class="basics">
            <span>语言设置</span>
            <label class="radio-inline">
                <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option1">中文简体
            </label>
            <label class="radio-inline">
                <input type="radio" name="inlineRadioOptions" id="inlineRadio4" value="option2"> 中文繁体
            </label>
        </div>
        <div class="basics">
            <span>简信接收设置</span>
            <label class="radio-inline">
                <input type="radio" name="inlineRadioOptions" id="inlineRadio5" value="option1">接收所有简信
            </label>
            <label class="radio-inline">
                <input type="radio" name="inlineRadioOptions" id="inlineRadio6" value="option2"> 只接收我关注的用户的简信
            </label>
        </div>
        <div class="basics">
            <span>提醒邮件通知</span>
            <label class="radio-inline">
                <input type="radio" name="inlineRadioOptions" id="inlineRadio7" value="option1">所有动态
            </label>
            <label class="radio-inline">
                <input type="radio" name="inlineRadioOptions" id="inlineRadio8" value="option2"> 每天未读汇总
            </label>
            <label class="radio-inline">
                <input type="radio" name="inlineRadioOptions" id="inlineRadio9" value="option2"> 不接收
            </label>
        </div>-->
        <div class="basics">
            <a href="javascript:;" class="file">保存
            </a>
        </div>
        <div class="line"></div>
        <h4 id="D2">个人资料</h4>
        <form method="post">

            <div class="basics">
                <span>昵称</span>
                <input type="text" class="form-control" id="username" placeholder="${(user.userInfoVO.userName)!'昵称'}">
            </div>
            <div class="basics">
                <span>性别</span>
                <label class="radio-inline">
                    <input type="radio" name="sex" <#if user??><#if user.userInfoVO.sex??><#if (user.userInfoVO.sex=='1')>checked</#if></#if></#if> id="sex" value="1">男
                </label>
                <label class="radio-inline">
                    <input type="radio" name="sex" <#if user??><#if user.userInfoVO.sex??><#if (user.userInfoVO.sex=='2')>checked</#if></#if></#if> id="sex" value="2">女
                </label>
                <label class="radio-inline">
                    <input type="radio" name="sex" <#if user??><#if user.userInfoVO.sex??><#if (user.userInfoVO.sex=='3')>checked</#if></#if></#if> id="sex" value="3">保密</label>
            </div>
            <div class="basics">
                <span>生日</span>
                <select id="sel_year" name="year" ></select>年
                <select id="sel_month" name="month"></select>月
                <select id="sel_day" name="day"></select>日
            </div>
            <div class="basics">
                <span>个人介绍</span>
                <textarea class="form-control" rows="3" id="description" name="description" placeholder="${(user.userInfoVO.description)!'填写你的个人简介'}"></textarea>
            </div>
            <!--<div class="basics">
                <span>个人网站</span>
                <input type="text" class="form-control" id="exampleInputEmail1" placeholder="http://你的网址">
            </div>-->
            <!--<div class="basics">
                <span>微信二维码</span>
                <a href="javascript:;" class="file">选择文件
                    <input type="file" name="" id="">
                </a>
            </div>-->
           <!-- <div class="basics">
                <span>社交帐号</span>
                <div class="jy-third">
                    <img src="${basePath}/img/wecat.jpg"/>
                    <a class="third-binding" href="#">微信绑定</a>
                    <a class="third-unbinding" href="#">解绑</a>
                </div>
                <div class="jy-third">
                    <img src="${basePath}/img/sina.jpg"/>
                    <a class="third-binding" href="#">微博绑定</a>
                    <a class="third-unbinding" href="#">解绑</a>
                </div>
                <div class="jy-third">
                    <img src="${basePath}/img/qq.jpg"/>
                    <a class="third-binding" href="#">QQ绑定</a>
                    <a class="third-unbinding" href="#">解绑</a>
                </div>
            </div>-->
            <div class="basics">
                <a href="javascript:;" class="file" id="info_upload">保存
                </a>
            </div>
        </form>
        <!--<div class="line"></div>
        <h4 id="D3">微博认证</h4>
        <ul class="list-unstyled">
            <li>简易新浪微博联合认证<span>简易推荐作者</span>
                <ul>
                    <li>简易帐号注册超过</li>
                    <li>简易帐号绑定新浪微博帐号</li>
                    <li>绑定手机号码</li>
                    <li>绑定手机号码</li>
                    <li>在简易发表文章字数达到 20000 字</li>
                    <li>在简易收获喜欢数达到 2000 个</li>
                </ul>
            </li>
            <li>
                简易新浪微博联合认证<span>简易专题运营者</span>
                <ul>
                    <li>简易帐号注册超过 30 天</li>
                    <li>简易帐号绑定新浪微博帐号</li>
                    <li>绑定手机号码</li>
                    <li>在简易参与编辑的专题收获订阅总数达到 1000 个</li>
                </ul>
            </li>
        </ul>
        <div class="line"></div>
        <h4 id="D4">黑名单</h4>
        <p>你可以在用户主页将用户加入你的黑名单。在你黑名单中的用户无法在你文章下评论，无法在其它评论中提到你，无法给你发送简信，自动从你的粉丝列表移除且无法再关注你。</p>
        <div class="line"></div>
        <h4 id="D5">赞赏设置</h4>
        <div class="basics">
            <span>赞赏功能</span>
            <label class="radio-inline">
                <input type="radio" name="inlineRadioOptions" id="inlineRadio10" value="option1">开启
            </label>
            <label class="radio-inline">
                <input type="radio" name="inlineRadioOptions" id="inlineRadio11" value="option2">关闭
            </label>
        </div>
        <div class="basics">
            <span>默认接受金额</span>
            <div class="form-group">
                <div class="input-group">
                    <div class="input-group-addon">￥</div>
                    <input type="text" class="form-control" id="exampleInputAmount" placeholder="输入金额">
                </div>
            </div>
        </div>
        <div class="basics">
            <span>赞赏描述</span>
            <textarea class="form-control" rows="3" placeholder=""></textarea>
        </div>
        <div class="basics">
            <a href="javascript:;" class="file">保存
            </a>
        </div>
        <div class="line"></div>
        <h4 id="D6">账号管理</h4>
        <div class="basics">
            <span>打包下载文章</span>
            <a href="javascript:;" class="file">下载所有文章
            </a>
        </div>
        <div class="basics">
            <span>删除账号</span>
            <a href="javascript:;" class="file">删除账号
            </a>
        </div>
        <div class="line"></div>-->
    </div>
    <!--展示用户生日信息-->
    <#if user??>
        <#if user.userInfoVO.birthday??>
            <input hidden id="year_hidden" value="${(user.userInfoVO.birthday?string('yyyy'))}">
            <input hidden id="month_hidden" value="${(user.userInfoVO.birthday?string('MM'))}">
            <input hidden id="day_hidden" value="${(user.userInfoVO.birthday?string('dd'))}">
        </#if>
    </#if>
</div>
<#include "/common/footer.html" />
<script type="text/javascript" src="${basePath}/js/plugins/layer.js"></script>
<script type="text/javascript" src="${basePath}/js/ourjs/common/common_validate.js"></script>
<script type="text/javascript" src="${basePath}/js/utils/layer_utils.js"></script>
<script type="text/javascript" src="${basePath}/js/ourjs/settings_js.js"></script>
<script type="text/javascript" src="${basePath}/js/plugins/time-birthday/birthday.js"></script>

<script>
    (function (win, doc) {
        $().dropdown('toggle');
        var sopportTouch = "ontouchstart" in doc,
                tapStart = sopportTouch ? "touchstart" : "mousedown",
                tapEnd = sopportTouch ? "touchend" : "mouseup";
        doc.querySelector('#searchInput').addEventListener('focus', function () {
            this.parentElement.className = 'form-search-act';
        });
        doc.querySelector('#searchInput').addEventListener('blur', function () {
            this.parentElement.className = 'form-search';
        });
        $(doc).on('click', '#write-article', function() {
            win.location.href = "/article/toWriteArticle";
        });
    })(window, document);

    /*头像裁剪*/
    angular.module('app', ['ngImgCrop'])
            .controller('Ctrl', function($scope) {
                $scope.myImage='';
                $scope.myCroppedImage='';

                var handleFileSelect=function(evt) {
                    var file=evt.currentTarget.files[0];
                    var reader = new FileReader();
                    reader.onload = function (evt) {
                        $scope.$apply(function($scope){
                            $scope.myImage=evt.target.result;
                        });
                    };
                    reader.readAsDataURL(file);
                };
                angular.element(document.querySelector('#fileInput')).on('change',handleFileSelect);

            });

    //设置用户生日展示
    var year;
    var month;
    var day;
    if(document.getElementById("year_hidden")){
        year=document.getElementById("year_hidden").value;
    }
    if(document.getElementById("month_hidden")){
        month = document.getElementById("month_hidden").value;
    }

    if(document.getElementById("day_hidden")){
        day = document.getElementById("day_hidden").value;
    }
    //年/月/日设置
    if(year!=null){
        $("#sel_year").attr('rel',year);
    }
    if(month!=null){
        $("#sel_month").attr('rel',month);
    }
    if(day!=null){
        $("#sel_day").attr('rel',day);
    }
    $.ms_DatePicker();
</script>
</body>

</html>